// 主题配色
$theme-colors: (
  'primary': $primary-color,
  'success': $success-color,
  'warning': $warning-color,
  'danger': $danger-color,
  'info': $info-color
);

// 主题背景色
$theme-backgrounds: (
  'primary': mix(white, $primary-color, 90%),
  'success': mix(white, $success-color, 90%),
  'warning': mix(white, $warning-color, 90%),
  'danger': mix(white, $danger-color, 90%),
  'info': mix(white, $info-color, 90%)
);

// 主题边框色
$theme-borders: (
  'primary': $primary-color,
  'success': $success-color,
  'warning': $warning-color,
  'danger': $danger-color,
  'info': $info-color
);

// 应用主题色
@each $name, $color in $theme-colors {
  .text-#{$name} {
    color: $color !important;
  }
  
  .bg-#{$name} {
    background-color: map-get($theme-backgrounds, $name) !important;
  }
  
  .border-#{$name} {
    border-color: map-get($theme-borders, $name) !important;
  }
}

// 儿童创想乐园特色主题
.kid-theme {
  // 活泼的背景渐变
  &.app-wrapper {
    background: linear-gradient(135deg, #FFE5E5 0%, #E8F5FF 100%);
  }
  
  // 圆润的卡片样式
  .app-card {
    border-radius: $border-radius-large;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.9);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }
  }
  
  // 可爱的按钮样式
  .app-button {
    &.primary {
      background: linear-gradient(45deg, $primary-color, lighten($primary-color, 10%));
      border-radius: 20px;
      padding: 10px 24px;
      font-size: $font-size-medium;
      
      &:hover {
        transform: scale(1.05);
      }
    }
  }
  
  // 导航菜单样式
  .sidebar-container {
    background: rgba(48, 65, 86, 0.95);
    backdrop-filter: blur(10px);
    
    .logo-container {
      background: rgba(43, 47, 58, 0.8);
    }
  }
  
  // 头像样式
  .app-avatar {
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

// Default theme variables override
:root {
  // Brand colors
  --el-color-primary: #{$primary-color};
  --el-color-success: #{$success-color};
  --el-color-warning: #{$warning-color};
  --el-color-danger: #{$error-color};
  --el-color-info: #{$info-color};

  // Text colors
  --el-text-color-primary: #{$text-color};
  --el-text-color-regular: #{$text-regular};
  --el-text-color-secondary: #{$text-color-secondary};
  --el-text-color-placeholder: #{$text-placeholder};

  // Border colors
  --el-border-color: #{$border-color};
  --el-border-color-light: #{$border-light};
  --el-border-color-lighter: #{$border-lighter};
  --el-border-color-extra-light: #{$border-extra-light};

  // Background colors
  --el-bg-color: #{$background-white};
  --el-bg-color-page: #{$background-base};

  // Border radius
  --el-border-radius-base: #{$border-radius-base};
  --el-border-radius-small: #{$border-radius-sm};
  --el-border-radius-round: #{$border-radius-circle};

  // Font sizes
  --el-font-size-extra-large: #{$font-size-extra-large};
  --el-font-size-large: #{$font-size-large};
  --el-font-size-medium: #{$font-size-medium};
  --el-font-size-base: #{$font-size-base};
  --el-font-size-small: #{$font-size-sm};
  --el-font-size-extra-small: #{$font-size-extra-small};

  // Animation
  --el-transition-duration: #{$animation-duration-base};
  --el-transition-duration-fast: #{$animation-duration-base};
} 